<template>
  <div class="major-analysis">
    <div class="analysis-header">
      <div class="header-left">
        <span style="white-space: nowrap">专业分析</span>
        <el-tag size="small" type="info" class="major-tag">
          <span class="major-name">{{ majorName }}</span>
        </el-tag>
      </div>
      <div class="header-right">
        <el-select
          v-model="selectedRegion"
          placeholder="选择地区"
          size="small"
          style="width: 120px; margin-right: 10px"
        >
          <el-option v-for="region in regions" :key="region.value" :label="region.label" :value="region.value" />
        </el-select>
        <el-select v-model="selectedCity" placeholder="选择城市" size="small" style="width: 120px">
          <el-option v-for="city in cities" :key="city.value" :label="city.label" :value="city.value" />
        </el-select>
        <el-button type="primary" size="small" @click="generateAnalysis" :loading="loading" style="margin-left: 10px">
          生成分析报告
        </el-button>
        <el-button
          size="small"
          :disabled="!analysisData"
          style="margin-left: 10px"
          @click="fullscreenDialogVisible = true"
        >
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </div>

    <div class="analysis-content" v-loading="loading">
      <template v-if="analysisData">
        <!-- 专业概述 -->
        <div class="analysis-section">
          <h4>专业概述</h4>
          <p>{{ analysisData.overview }}</p>
        </div>

        <!-- 就业前景 -->
        <div class="analysis-section">
          <h4>就业前景</h4>
          <div class="prospects-grid">
            <div class="prospect-item">
              <div class="prospect-title">就业方向</div>
              <el-tag
                v-for="(item, index) in analysisData.careerPaths"
                :key="index"
                class="prospect-tag"
                :type="getTagType(index)"
              >
                {{ item }}
              </el-tag>
            </div>
            <div class="prospect-item">
              <div class="prospect-title">薪资水平</div>
              <div class="salary-range">
                {{ analysisData.salaryRange }}
              </div>
            </div>
            <div class="prospect-item">
              <div class="prospect-title">发展空间</div>
              <el-rate v-model="analysisData.developmentPotential" disabled show-score text-color="#ff9900" />
            </div>
          </div>
        </div>

        <!-- 学习建议 -->
        <div class="analysis-section">
          <h4>学习建议</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in analysisData.studyTips"
              :key="index"
              :timestamp="item.title"
              placement="top"
            >
              <el-card>
                {{ item.content }}
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 相关专业推荐 -->
        <div class="analysis-section">
          <h4>相关专业推荐</h4>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(major, index) in analysisData.relatedMajors" :key="index">
              <el-card class="related-major-card" shadow="hover">
                <h5>{{ major.name }}</h5>
                <p>{{ major.description }}</p>
                <el-tag size="small" type="info">{{ major.similarity }}% 相关度</el-tag>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </template>
      <div v-else class="empty-state">
        <el-empty description="点击生成分析报告">
          <template #image>
            <el-icon class="empty-icon"><Document /></el-icon>
          </template>
          <template #description>
            <p>当前专业：{{ majorName }}</p>
            <p class="empty-tip">请选择地区和城市，然后点击上方按钮生成专业的智能分析报告</p>
          </template>
        </el-empty>
      </div>
    </div>

    <el-dialog v-model="fullscreenDialogVisible" :show-close="true" title="专业分析" class="fullscreen-dialog">
      <div class="analysis-content" style="height: 60vh; overflow-y: auto; overflow-x: hidden">
        <template v-if="analysisData">
          <!-- 专业概述 -->
          <div class="analysis-section">
            <h4>专业概述</h4>
            <p>{{ analysisData.overview }}</p>
          </div>

          <!-- 就业前景 -->
          <div class="analysis-section">
            <h4>就业前景</h4>
            <div class="prospects-grid">
              <div class="prospect-item">
                <div class="prospect-title">就业方向</div>
                <el-tag
                  v-for="(item, index) in analysisData.careerPaths"
                  :key="index"
                  class="prospect-tag"
                  :type="getTagType(index)"
                >
                  {{ item }}
                </el-tag>
              </div>
              <div class="prospect-item">
                <div class="prospect-title">薪资水平</div>
                <div class="salary-range">
                  {{ analysisData.salaryRange }}
                </div>
              </div>
              <div class="prospect-item">
                <div class="prospect-title">发展空间</div>
                <el-rate v-model="analysisData.developmentPotential" disabled show-score text-color="#ff9900" />
              </div>
            </div>
          </div>

          <!-- 学习建议 -->
          <div class="analysis-section">
            <h4>学习建议</h4>
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in analysisData.studyTips"
                :key="index"
                :timestamp="item.title"
                placement="top"
              >
                <el-card>
                  {{ item.content }}
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>

          <!-- 相关专业推荐 -->
          <div class="analysis-section">
            <h4>相关专业推荐</h4>
            <el-row :gutter="20">
              <el-col :span="8" v-for="(major, index) in analysisData.relatedMajors" :key="index">
                <el-card class="related-major-card" shadow="hover">
                  <h5>{{ major.name }}</h5>
                  <p>{{ major.description }}</p>
                  <el-tag size="small" type="info">{{ major.similarity }}% 相关度</el-tag>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </template>
        <div v-else class="empty-state">
          <el-empty description="点击生成分析报告">
            <template #image>
              <el-icon class="empty-icon"><Document /></el-icon>
            </template>
            <template #description>
              <p>当前专业：{{ majorName }}</p>
              <p class="empty-tip">请选择地区和城市，然后点击上方按钮生成专业的智能分析报告</p>
            </template>
          </el-empty>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue"
import { ElMessage } from "element-plus"
import { Document, FullScreen } from "@element-plus/icons-vue"
import { getMajorAnalysisApi } from "@/interface"

interface Props {
  majorCode: string
  majorName: string
}

const props = defineProps<Props>()
const loading = ref(false)
const analysisData = ref<any>(null)
const fullscreenDialogVisible = ref(false)

// 地区和城市数据
const regionCityMap = {
  north: [
    { value: "beijing", label: "北京" },
    { value: "tianjin", label: "天津" },
    { value: "shijiazhuang", label: "石家庄" },
    { value: "taiyuan", label: "太原" },
    { value: "huhehaote", label: "呼和浩特" }
  ],
  northeast: [
    { value: "shenyang", label: "沈阳" },
    { value: "dalian", label: "大连" },
    { value: "changchun", label: "长春" },
    { value: "harbin", label: "哈尔滨" }
  ],
  east: [
    { value: "shanghai", label: "上海" },
    { value: "nanjing", label: "南京" },
    { value: "hangzhou", label: "杭州" },
    { value: "hefei", label: "合肥" },
    { value: "fuzhou", label: "福州" },
    { value: "nanchang", label: "南昌" },
    { value: "jinan", label: "济南" }
  ],
  central: [
    { value: "zhengzhou", label: "郑州" },
    { value: "wuhan", label: "武汉" },
    { value: "changsha", label: "长沙" }
  ],
  south: [
    { value: "guangzhou", label: "广州" },
    { value: "shenzhen", label: "深圳" },
    { value: "nanning", label: "南宁" },
    { value: "haikou", label: "海口" }
  ],
  southwest: [
    { value: "chongqing", label: "重庆" },
    { value: "chengdu", label: "成都" },
    { value: "guiyang", label: "贵阳" },
    { value: "kunming", label: "昆明" },
    { value: "lasa", label: "拉萨" }
  ],
  northwest: [
    { value: "xian", label: "西安" },
    { value: "lanzhou", label: "兰州" },
    { value: "xining", label: "西宁" },
    { value: "yinchuan", label: "银川" },
    { value: "urumqi", label: "乌鲁木齐" }
  ]
}

const regions = ref([
  { value: "north", label: "华北地区" },
  { value: "northeast", label: "东北地区" },
  { value: "east", label: "华东地区" },
  { value: "central", label: "华中地区" },
  { value: "south", label: "华南地区" },
  { value: "southwest", label: "西南地区" },
  { value: "northwest", label: "西北地区" }
])

const cities = ref<Array<{ value: string; label: string }>>([])
const selectedRegion = ref("")
const selectedCity = ref("")

// 监听专业变化
watch(
  () => props.majorName,
  () => {
    // 当专业改变时，清空之前的分析数据
    analysisData.value = null
  }
)

// 监听地区变化，更新城市列表
watch(selectedRegion, newRegion => {
  selectedCity.value = ""
  if (newRegion) {
    cities.value = regionCityMap[newRegion as keyof typeof regionCityMap] || []
  } else {
    cities.value = []
  }
})

// 生成分析报告
const generateAnalysis = async () => {
  if (!props.majorName) {
    ElMessage.warning("请先选择专业")
    return
  }

  if (!selectedRegion.value) {
    ElMessage.warning("请选择地区")
    return
  }

  if (!selectedCity.value) {
    ElMessage.warning("请选择城市")
    return
  }

  loading.value = true
  try {
    const res = await getMajorAnalysisApi({
      majorName: props.majorName,
      selectedRegion: selectedRegion.value,
      selectedCity: selectedCity.value
    })
    analysisData.value = res
    ElMessage.success("分析报告生成成功")
  } catch (error: any) {
    ElMessage.error(error.response?.data?.error || "生成分析报告失败")
  } finally {
    loading.value = false
  }
}

// 获取标签类型
const getTagType = (index: number) => {
  const types = ["", "success", "warning", "danger"]
  return types[index % types.length]
}
</script>

<style lang="scss" scoped>
.major-analysis {
  height: 100%;
  display: flex;
  flex-direction: column;

  .analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;

      .title {
        font-size: 16px;
        font-weight: bold;
      }

      .major-tag {
        font-size: 12px;
        padding: 0 8px;
        .major-name {
          display: inline-block;
          height: 24px;
          line-height: 24px;
          max-width: 100px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }

    .header-right {
      display: flex;
      align-items: center;
    }
  }

  .analysis-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 10px;

    .analysis-section {
      margin-bottom: 30px;

      h4 {
        margin-bottom: 15px;
        color: #333;
      }
    }

    .prospects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 15px;

      .prospect-item {
        .prospect-title {
          font-weight: bold;
          margin-bottom: 10px;
          color: #666;
        }

        .prospect-tag {
          margin-right: 8px;
          margin-bottom: 8px;
        }

        .salary-range {
          font-size: 18px;
          color: #f56c6c;
          font-weight: bold;
        }
      }
    }

    .related-major-card {
      margin-bottom: 20px;

      h5 {
        margin: 0 0 10px 0;
      }

      p {
        color: #666;
        margin-bottom: 10px;
      }
    }
  }

  .empty-state {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .empty-icon {
      font-size: 48px;
      color: #909399;
      margin-bottom: 20px;
    }

    .empty-tip {
      color: #909399;
      font-size: 14px;
      margin-top: 10px;
    }
  }
}

.fullscreen-dialog {
  .analysis-content {
    padding: 0;
  }
}
</style>
